<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Modo IFrame Usando PHP SDK 3.0 DQA</title>
        <link href="css/template.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <style type="text/css">
            a{
                text-decoration: none;
                color:#3B5998;
                
            }
            a:hover
            {
                text-decoration: underline;
                color: #3B5998;
            }
            
            
            #top
            {
                  width: 495px;
                  height: 143px;
                  overflow: hidden;
                  margin-bottom: 10px;
            }
            #ranking_actual
            {
                  margin-top: 0px;
                  margin-bottom: 30px;
                  height: 103px;
            }
            #ranking_actual_f1
            {
                  width: 495px;
                  height: 33px;  
            }
            .item_actual
            {
                float: left;
                text-align: left;
                width: 98px;
                height: 70px;
                overflow: hidden;
            }
            #fila1
            {
                width:495px; height:34px; float:left; background:#ccecf7;                
            }
            #fila2
            {
                width:495px; margin:auto; overflow:hidden;background-color: #CCECF7; padding-top: 9px;
            }
            #fila3
            {
                width:495px; height:34px; float:left; background:#ccecf7;margin-top: 5px;
            }
            #app
            {
                width: 495px; overflow: hidden; height: 200px;
            }
            #navlist
            {
                width:495px; overflow: hidden; position: relative;
            }
        </style>
        <script type="text/javascript">
                $(document).ready(function(){
                    function slideout(){
                        setTimeout(function(){
                            $("#response").slideUp("slow", function () {
                                });
                                }, 2000);}

                    $("#response").hide();
                    $(function() {
                    $("#list ul").sortable({ opacity: 0.8, cursor: 'move' });
                    });

                });
        </script>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#tabs").tabs();
            });

            function updateStatus(){
                var status  =   document.getElementById('status').value;
                
                $.ajax({
                    type: "POST",
                    url: "<?=$fbconfig['baseUrl']?>/ajax.php",
                    data: "status=" + status,
                    success: function(msg){
                        alert(msg);
                    },
                    error: function(msg){
                        alert(msg);
                    }
                });
            }
            function updateStatusViaJavascriptAPICalling(){
                var status  =   document.getElementById('status').value;
                    FB.api('/me/feed', 'post', { message: status }, function(response) {
                        if (!response || response.error) {
                             alert('Error occured');
                        } else {
                             alert('Status updated Successfully');
                        }
                   });
            }
            function streamPublish(str_print,eleccion,id_face,name_face,email_face)
            {
                //alert(eleccion);
                FB.ui({ method: 'feed',
                        name: '<?php echo $muro_titulo;?>',
                        link    : '<?php echo $muro_link;?>',
                        picture : '<?php echo $muro_image;?>', 
                        actions: [{ name: 'Viva GyM', link: '<?php echo $fbconfig['fanpageBaseUrl'];?>' }],
                        caption: '<?php echo $muro_descripcion2;?>',
                        description: str_print
                      },
                      function(response) 
                      {
                        if (response && response.post_id)  //Publico en su muro
                        {
                          //alert('Publicó');
                          // Actualizamos Puntaje (+1)
                          //$.post("grabar.php",{var_user_id_facebook:user_id_facebook,var_to_mensaje:to_mensaje,var_imagen_friend:imagen_friend,var_nombre_friend:nombre_friend,var_no_amigos_friend:no_amigos_friend,var_no_likes_friend:no_likes_friend,var_wall_count_friend:wall_count_friend,var_perfil_update_friend:perfil_update_friend,var_cumple_friend:cumple_friend});
                          //user_id_facebook,to_mensaje,name,description,hrefTitle,hrefLink,image,imagen_friend,nombre_friend,no_amigos_friend,no_likes_friend,wall_count_friend,perfil_update_friend,cumple_friend  
                                    
                         
                         $.post("grabar.php",{var_eleccion:eleccion,var_idfacebook:id_face,var_nombre:name_face,var_email:email_face}, 
                          function() 
                          { 
                              //Mostrar Puntaje Actualizado
                              top.location.href= '<?php echo $fbconfig['fanpageBaseUrl'];?>';
                          });
                         
                         
                         
                          //Actualizar imagen jpg
                          //document.getElementById('check-'+to_mensaje).innerHTML = '<img src="images/check.jpg" alt="Ya Compartido" title="Ya Compartido">';

                          //Mostrar Puntaje Actualizado
                          //$('#puntaje-user').load('borrador2.php?code='+user_id_facebook);


                        } 
                        else  //No publico en su muro
                        {
                            //alert('No Publicó');                          
                        }
                      }
                    );                      
                    //http://developers.facebook.com/docs/reference/dialogs/feed/
            }
            function publishStream(id_face,name_face,email_face)
            {
                
                var eleccion = ''
                var name_voto = ''
                var id_voto = ''
                var posicion_voto = 0;
                var str_print = '';
                $('#navlist li').each(function(index) 
                {
                    eleccion = eleccion + $(this).attr("name") + ',';
                    id_voto = $(this).attr("name");
                    posicion_voto++;
                    switch (id_voto)
                    {
                        case "1":
                              name_voto = 'Dormitorio';
                          break;
                        case "2":
                              name_voto = 'Sala';
                          break;
                        case "3":
                              name_voto = 'Cocina';
                          break;
                        case "4":
                              name_voto = 'Comedor';
                          break;  
                        case "5":
                              name_voto = 'Jardin';
                          break;    
                    }
                    str_print = str_print+posicion_voto+') '+name_voto+'\n\n';
                    
                });
                //alert(str_print);
                //alert(eleccion);

                
/*
                //Capturamos "Latido" elegido x el usuario
                var i;
                for (i=0; i <document.myform.group1.length;i++)
                { 
                     if (document.myform.group1[i].checked) 
                         break; 
                } 
                var latido_title = document.myform.group1[i].title;
                var latido_id    = document.myform.group1[i].value;
                var user_name      = '<?php //echo $fqlResult[0]['name'];?>';
                var user_id        = '<?php //echo $fqlResult[0]['uid'];?>';
                image = latido_id+'.jpg';
                descrip = descrip+" "+latido_title;
                //Grabar en BD
                $.post("grabar.php",{id_usuario:latido_title,id_latido:latido_id,name_user:user_name,id_user:user_id});
*/
                //Publicar en el Muro 
                streamPublish(str_print,eleccion,id_face,name_face,email_face);
            }
            function increaseIframeSize(w,h){
                var obj =   new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }

            function newInvite(){
                 var receiverUserIds = FB.ui({ 
                        method : 'apprequests',
                        message: 'come on man checkout my application. visit http://thinkdiff.net',
                 },
                 function(receiverUserIds) {
                          console.log("IDS : " + receiverUserIds.request_ids);
                        }
                 );
                 //http://developers.facebook.com/docs/reference/dialogs/requests/
            }
        </script>
    </head>
<body>
    <div id="fb-root"></div>
    <script type="text/javascript" src="https://connect.facebook.net/es_LA/all.js"></script>
     <script type="text/javascript">
       FB.init({
         appId  : '<?=$fbconfig['appid']?>',
         status : true, // check login status
         cookie : true, // enable cookies to allow the server to access the session
         xfbml  : true  // parse XFBML
       });
       
     </script>


     
     
<div id="contenedor" style="width: 495px; overflow: hidden;">
         <div id="top">
            <img src="images/gmv5_top2.jpg" alt="" title="" border="0" />
         </div>
         <div class="texto1">
            <img src="images/gmv5_texto3.png" alt="" title="" border="0" />
         </div>
         <div id="ranking_actual">
             <div id="ranking_actual_f1">
                 <img src="images/gmv5_texto2.png" alt="" title="" border="0" />
             </div>
            <!--MOSTRAR RANKING DINAMICO-->             
             <div id="ranking_actual_f2">
<?php
                $sql_verificar2 = "SELECT nombre from gmv_top5 ORDER BY puntaje DESC";
                $result2 = mysql_query($sql_verificar2);
                while ($row2 = mysql_fetch_array($result2))
                {
                    //echo $row2["nombre"].'.jpg'; echo '<br/>';
                    echo '<div class="item_actual">';
                    echo  '<img src="images/'.$row2["nombre"].'.jpg'.'" alt="" title="" border="0" />';
                    echo '</div>';                    
                }
?>                 
             </div>
            <!--END MOSTRAR RANKING DINAMICO-->             
         </div>
         <div class="texto1">
            <img src="images/gmv5_texto4.png" alt="" title="" border="0" />
         </div>    



    
<!--APP    -->
        <div id="app">    

            <div id="fila1">
                <ul class="ULnum">
                    <li>#1</li>
                    <li>#2</li>
                    <li>#3</li>
                    <li>#4</li>
                    <li>#5</li>
                </ul>
            </div>


            <div id="fila2">
                <div id="container">
                    <div id="list" >

                        <ul id="navlist">

        <?php
                        $i=0;
                        $query  = "select * from gmv_top5 limit 0,5";
                        $result = mysql_query($query);
                        while($row = mysql_fetch_array($result, MYSQL_ASSOC))
                        {
                            $i = $i +1;	
                            $id = stripslashes($row['id']);
                            $text = stripslashes($row['nombre']);
                            $imagen  = stripslashes($row['imagen']);
                            $puntuacion  = stripslashes($row['puntuacion']);
        ?>

                            <li id="arrayorder_<?php echo $id ?>" name="<?php echo $id ?>">
                                <div class="ULrankALL">
                                <div class="ULrankimg"><img src="images/<?php echo $text.'_p.png' ?>" alt=""></div>
                                </div>
                            </li>

        <?php 
        } 
        ?>
                        </ul>

                    </div>
                </div>
            </div>

    
            <div id="fila3">
                <ul class="ULnum2">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
    
 </div>   
 <!--end APP-->   
    
    
    
    
    
        


                <!--ENVIO DATOS-->
                <div style="width:495px; text-align: right;">
                    <a href="#" onClick="publishStream('<?php echo $userInfo['id'];?>','<?php echo $userInfo['name'];?>','<?php echo $userInfo['email'];?>'); return false;">
                        <img src="images/gmv5_btn_enviar.png" alt="" border="0" />
                    </a>
                </div>
                <!--END ENVIO DATOS-->




</div>
     
  <?php
     //var_dump($userInfo);
     //echo $userInfo['id'];
     //echo $userInfo['name'];
     //echo $userInfo['email'];     
  ?>
     

    <script type="text/javascript">
        increaseIframeSize(495, 1200);
    </script>

    </body>
</html>